<template>
	<view class="changeInfoPage">
		<view class="pageTitle">
			编辑个人资料
		</view>

		<view class="userPhotoAndText">
			<view class="userPhotoBox">
				<image class="userPhoto" :src="userPhoto" @click="changeUserPhoto"></image>
				<view class="userPhotoText">
					点击更新头像
				</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list">

			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="text">昵称</view>
					<input class="toEdit" v-model="userNickname"></input>
				</view>
			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="text">性别</view>
					<input class="toEdit" v-model="userSexText" @blur="checkSex"></input>
				</view>
			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="text">uid</view>
					<input class="toEdit" v-model="userId" disabled="true"></input>
				</view>
			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="text">手机号</view>
					<input class="toEdit" v-model="userPhone" disabled="true"></input>
				</view>
			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="text">身份证号</view>
					<input class="toEdit" v-model="idNumber" disabled="true"></input>
				</view>
			</view>
			<view class="list">
				<view class="li noborder" >
					<view class="text">真实姓名</view>
					<input class="toEdit" v-model="userName"></input>
				</view>
			</view>
			
		</view>
		<button type="saveUserChanges" @click="saveUserChanges">保存修改</button>
		<button type="exitAccountBtn" @click="gotoLogin">退出登陆</button>
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex'
	export default {
		data() {
			return {
				userSexText:"",
				userId: null,
				userNickname: "11",
				userPhone: "110",
				userName: "Yang",
				userSex: 0,
				userPassword:"",
				userPhoto:"",
				idNumber:"",
				userType:0,
				userStatus:1
			}
		},
		onLoad(option){

		},
		computed:{
			...mapState(['user'])
		},
		methods: {
			...mapActions(['setUser']),
			checkSex(){
				if(this.userSexText === "男" || this.userSexText === "女"){
					
				}else{
					if(this.user.userSex==1){
						this.userSexText = "女"
						this.userSex = 1
					}else if(this.user.userSex==0){
						this.userSexText = "男"
						this.userSex= 0
					}
				}
			},
			saveUserChanges(){
				var sex = null
				if(this.userSexText === "男"){
					this.userSex = 0
					this.user.userSex = 0
					sex = 0
				}else if(this.userSexText === "女"){
					this.userSex= 1
					sex = 1
					this.user.userSex = 1
				}
				
				this.$axios.post('updateUserPartById',this.qs.stringify(this.user))
				// this.$axios.post('updateUserPartById',this.qs.stringify({'userId':this.user.userId,
				// 												'userPhone':this.user.userPhone,
				// 												'userNickname':this.user.userNickname,
				// 												'userName':this.user.userName,
				// 												'userSex':sex}))
				.then((res)=>{
					console.log(res)
					if (this.user.userPhoto) {
						uni.uploadFile({
							url: this.baseURL + 'upload/headPhoto',
							filePath: this.userPhoto[0],
							name: 'headPhoto',
							formData: {
								'userId': this.user.userId
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								var u = {
										userId : this.user.userId,
										userNickname : this.userNickname,
										userPhone : this.user.userPhone,
										userName : this.userName,
										userSex : this.userSex,
										userPhoto : this.userPhoto,
										userPassword : this.user.userPassword,
										idNumber: this.idNumber,
										userType: this.user.userType,
										userStatus: this.user.userStatus,
									}
								console.log(u)
								this.setUser(u)
								uni.showToast({
									title:"修改成功!",
									duration:1000
								})
								uni.switchTab({
									url:"/pages/mine/index"
								})
							},
							fail: e => {
								console.log(e)
								uni.showToast({
									title:"修改失败!",
									duration:1000
								})
								uni.switchTab({
									url:"/pages/mine/index"
								})
							}
						})
					}
					console.log(this.user)
				})
			},
			gotoLogin(){
				uni.showToast({
					title:"已退出登录",
					duration:1000
				})
				uni.redirectTo({
					url:"/pages/mine/login"
				})
			},
			changeUserPhoto(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						this.user.userPhoto = res.tempFilePaths
						this.userPhoto = res.tempFilePaths
					}
				})
			},
		},
		mounted(){
			if(this.user.userSex==1){
				this.userSexText = "女"
			}else if(this.user.userSex==0){
				this.userSexText = "男"
			}
			this.userId = this.user.userId
			this.userNickname = this.user.userNickname
			this.userPhone = this.user.userPhone
			this.userName = this.user.userName
			this.userSex = this.user.userSex
			this.userPhoto = this.user.userPhoto
			this.userPassword = this.user.userPassword
			this.idNumber = this.user.idNumber
			this.userStatus = this.user.userStatus
		}
	}
</script>

<style lang="scss">
button[type="savaUserChanges"]{
	background-color: #F1F1F1;
	border-radius: 0;
	font-size: 34upx;
	margin-top: 60upx;
	width: 90%;
}
button[type="exitAccountBtn"]{
	background-color: rgb(247,200,150);
	border-radius: 0;
	font-size: 34upx;
	margin-top: 20upx;
	width: 90%;
}

/* 第一块 头像 */
.changeInfoPage{
	width: 100%;
	height: 100%;
}
.pageTitle{
	text-align: center;
	color: #FFFFFF;
	font-size: 18px;
}
.userPhotoAndText{
	width: 100%;
	height: 150px;
	margin: 0 auto;
	/* border-top: 1px solid #333333; */
	/* border-bottom: 1px solid #333333; */
	background-color: #C8C7CC;
}
.userPhotoBox{
	text-align: center;
}
.userPhoto{
	margin-top: 20px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: #007AFF;
}
.userPhotoText{
	font-size: 15px;
	margin-top: 5px;
	color: #555555;
}

/* 第二块 修改个人资料*/
.list-content{
	background: #fff;
}
.list{
	width:100%;
	border-bottom:15upx solid  #f1f1f1;
	background: #fff;
	&:last-child{
		border: none;
	}
	.li{
		width:92%;
		height:90upx;
		padding:0 4%;
		border-bottom:1px solid rgb(243,243,243);
		display:flex;
		align-items:center;
	&.noborder{
		border-bottom:0
		}
		.icon{
			flex-shrink:0;
			width:50upx;
			height:50upx;
			image{
				width:50upx;
				height:50upx;
			}
		}
		.text{
			padding-left:20upx;
			width:100%;
			color:#666;
			font-size: 33upx;
		}
		.to{
			flex-shrink:0;
			width:40upx;
			height:40upx;
		}
		.toEdit{
			text-align: right;
			color:#666;
			font-size: 33upx;
		}
	}
}


/* 第三块 退出登录/注销账号 */
.delete-user-box{
	position: absolute;
	bottom: 50px;
	width: 100%;
	height: 30px;
	background-color: #007AFF;
}
.delete-user-text{
	width: 100%;
	height: 30px;
	text-align: center;
	font-size: medium;
	color: #FFFFFF;
}
.exit-user-box{
	position: absolute;
	bottom: 20px;
	width: 100%;
	height: 30px;
	background-color: #F0AD4E;
}
.exit-user-text{
	width: 100%;
	height: 30px;
	text-align: center;
	font-size: medium;
	color: #FFFFFF;
}
</style>
